import React from 'react'
import ReactDOM from 'react-dom'
import './App.css'
import './index.css'

// 子组件
import CommentAdd from './components/CommentAdd'
import CommentList from './components/CommentList'

// 优化组件性能
import Comp1 from './components/Comp1'
import Comp2 from './components/Comp2'

// 父组件
class App extends React.Component {
  state = {
    comments: [
      {
        id: 1,
        name: '玺哥',
        comment: 'TS 原来这么好学'
      },
      {
        id: 2,
        name: '玺哥',
        comment: 'react 原来也这么好学'
      }
    ]
  }

  // 父组件提供一个函数，通过函数的参数来接收数据
  addComment = data => {
    // console.log('父组件接收到数据：', data)
    // 添加评论数据：
    // 错误演示：
    // 因为这是直接修改当前数据
    // this.state.comments.push(...)

    // 正确演示：
    const { comments } = this.state
    const id = comments.length === 0 ? 1 : comments[comments.length - 1].id + 1
    const newComments = [
      ...comments,
      {
        id,
        name: '玺哥',
        comment: data
      }
    ]
    this.setState({
      comments: newComments
    })
  }

  render() {
    return (
      <div className="App">
        {/* 优化组件性能 */}
        <Comp1></Comp1>
        <Comp2></Comp2>

        <div className="comment-container">
          {/* 评论数 */}
          <div className="comment-head">
            <span>28 评论</span>
          </div>

          {/* 排序 */}
          <div className="tabs-order">
            <ul className="sort-container">
              <li data-sort="1" className="on">
                按热度排序
              </li>
              <li data-sort="2">按时间排序</li>
            </ul>
          </div>

          {/* 发表评论 */}
          <CommentAdd addComment={this.addComment} />

          {/* 列表 */}
          <CommentList list={this.state.comments}></CommentList>
        </div>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))
